import React, {Component} from 'react'
import '../../less/index.less'
import {withRouter} from 'react-router-dom'
import {Icon, Modal, Tag, Checkbox, Row, Col} from 'antd'
import * as assignmentQuizTagAction from '../../actions/assignment-quiz-tag'

import {connect} from 'react-redux'
import {FormattedMessage} from 'react-intl'

class AssignmentTagBox extends Component {
    constructor (props) {
        super(props)
        this.state = {
            modalVisible: false
        }
    }

    componentWillMount () {
        const {programId} = this.props
        this.props.getAssignmentQuizTagsByProgramId(programId)
    }

    handleChange (tagIds) {
        const {assignmentId, quizId, studentId} = this.props
        this.props.editStudentAssignmentQuizTags(assignmentId, quizId, studentId, tagIds)
    }
    render () {
        const {assignmentQuizTag} = this.props
        const assignmentQuizTags = assignmentQuizTag.tags || []
        const studentTags = assignmentQuizTag.studentTags || []
        const selectTagIds = studentTags.map(item => item.assignmentQuizTag.id)
        const {modalVisible} = this.state
        return (
            <div className='back-icon'>
                <Tag style={{ borderStyle: 'dashed' }}
                     onClick={() => this.setState({modalVisible: true})}>
                    <Icon type='plus' /> Add Tag
                </Tag>
                {studentTags.map((item, index) =>
                    <Tag key={index} color={item.assignmentQuizTag.color === 'default' ? '' : item.assignmentQuizTag.color}>
                        {item.assignmentQuizTag.name}
                    </Tag>
                )}
                <Modal
                    title={<FormattedMessage id='标签' />}
                    centered
                    footer={null}
                    width={400}
                    visible={modalVisible}
                    onCancel={() => this.setState({modalVisible: false})}>
                    <Checkbox.Group style={{ width: '100%' }} value={selectTagIds} onChange={this.handleChange.bind(this)}>
                        <Row>
                            {assignmentQuizTags.map((item, index) => <Col span={12} key={index} className='tag-margin'>
                                    <Checkbox value={item.id}><Tag key={index} color={item.color === 'default' ? '' : item.color}>{item.name}</Tag></Checkbox>
                                </Col>
                            )}
                        </Row>
                    </Checkbox.Group>
                </Modal>
            </div>
        )
    }
}
const mapStateToProps = ({assignmentQuizTag}) => ({
    assignmentQuizTag
})
const mapDispatchToProps = dispatch => ({
    getAssignmentQuizTagsByProgramId: (programId) => dispatch(assignmentQuizTagAction.getAssignmentQuizTagsByProgramId(programId)),
    editStudentAssignmentQuizTags: (assignmentId, quizId, studentId, tagIds) => dispatch(assignmentQuizTagAction.editStudentAssignmentQuizTags(assignmentId, quizId, studentId, tagIds))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssignmentTagBox))
